<template>
    <div class="maind" style="padding-top:40px ;height: calc(100% - 5px);">
        <main>
            <el-header>
                <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                    @clear="getActivityList()"></el-input>
                <el-button class="look" size="small" @click="getassignmentList()">查询</el-button>
                <el-button class="add" size="small" @click="addForms()">新增</el-button>
                <el-button class="delet" size="small" @click=" machDelete(selectedRows)" :disabled="esdisabled"
                    :class="{ active: esdisabled == false }">批量删除</el-button>
            </el-header>
            <el-table style="height:calc(100% - 85px);" :data="assignmentList" border
                @selection-change="handleSelectionChange" size="small">

                <!-- 选择框列 -->
                <el-table-column type="selection" width="50"></el-table-column>

                <el-table-column label="任务编码">
                    <template slot-scope="scope">
                        <span>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="任务名称" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createOn }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建人">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createBy }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="修改时间" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.modifiedOn }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="修改人">
                    <template slot-scope="scope">
                        <span>{{ scope.row.modifiedBy }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button style="color: #17b3a3; " size="mini" type="text"
                            @click="handleEdit(scope.row)">修改</el-button>
                        <el-button style="color: #17b3a3; " size="mini" type="text"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加或者编辑募捐团队模态框 -->
            <el-dialog :title="id ? '修改' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="addassignment" :rules="rules" ref="addassignment" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="任务编码" prop="code">
                        <el-input v-model="addassignment.code"></el-input>
                    </el-form-item>
                    <el-form-item label="任务名称" prop="name">
                        <el-input v-model="addassignment.name"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="addassignment.remark"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm('addassignment')">修改</el-button>
                        <el-button v-else type="success" @click="addForm('addassignment')">添加</el-button>
                        <el-button @click="resetForm('addassignment')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <pagination :page="queryInfo.page" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>


        </main>
    </div>
</template>

<script>
import Pagination from "./Pagination.vue";
export default {
    data() {
        return {
            id: '',
            dialogFormVisible: false,
            esdisabled: true,
            total: 0,
            queryInfo: {
                t: '',
                page: 1,
                limit: 10,
                key: '',
            },
            assignmentList: [],
            addassignment: {
                code: '',
                name: '',
                remark: '',
                t: ''
            },
            selectedRows: [],
            rules: {
                code: [
                    { required: true, message: "任务编码不能为空", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "任务名称不能为空", trigger: "blur" },
                ],
            },

        }
    },
    methods: {
        //添加操作
        addForms() {
            this.id = '';
            this.addassignment = {
                code: '',
                name: '',
                remark: ''
            };
            this.dialogFormVisible = true;
        },
        // 获取任务列表
        async getassignmentList() {
            this.queryInfo.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/project/list", {
                params: this.queryInfo
            })
            console.log(res);
            this.assignmentList = res.page.list;
            // console.log(this.assignmentList);
            this.total = res.page.totalCount;//最大页数
            if (res.code != 0) return this.$message.error("获取任务列表失败");
        },
        // 分页器
        setRows(val) {
            this.queryInfo.limit = val;
            this.getassignmentList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
        },
        //批量删除
        handleSelectionChange(selection) {
            // this.selectedRows = selection;
            // console.log('Selected Rows:', this.selectedRows);
            this.selectedRows = selection.map(item => item.id);
            // console.log( this.selectedRows);
            if (this.selectedRows.length > 0) {
                this.esdisabled = false
            } else {
                this.esdisabled = true
            }

        },
        machDelete(id) {
            // console.log(row);
            this.$confirm(`是否删除[${id}]数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteassignment(id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async deleteassignment(id) {
            // console.log(this.selectedRows);
            const { data: res } = await this.axios.post("api/biosample/project/delete", id);
            if (res.code != 0) return this.$message.error("删除任务失败");
            this.$message.success("删除任务成功");
            this.getassignmentList();
        },
        //编辑
        async editForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (!valid) return false;
                const { data: res } = await this.axios.post("api/biosample/project/update", this.addassignment);
                if (res.code != 0) return this.$message.error("修改失败");
                this.$message.success("修改成功");
                this.dialogFormVisible = false;
                this.id = '';
                this.getassignmentList();
            })
        },
        // 表格回显
        async handleEdit(row) {
            console.log(row);
            this.dialogFormVisible = true;
            this.id = row.id;
            this.addassignment.t = new Date().getTime();
            const { data: res } = await this.axios.get(`api/biosample/project/info/${this.id}`, this.addassignment.t);
            this.addassignment = res.project;
        },
        //取消操作
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogFormVisible = false;
            this.id = '';
        },
        //单个删除
        handleDelete(row) {
            console.log(row);
            this.$confirm(`是否删除[${row.id}]数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteTeam(row.id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async deleteTeam(id) {
            const { data: res } = await this.axios.post(`api/biosample/project/delete`, [id]);
            if (res.code != 0) return this.$message.error("删除募捐团队失败");
            this.$message.success("删除募捐团队成功");
            this.getassignmentList();
        },
        //添加新增
        addForm(formName) {

            this.$refs[formName].validate(async (valid) => {
                if (!valid) return false;
                const { data: res } = await this.axios.post("api/biosample/project/save", this.addassignment);
                if (res.code != 0) return this.$message.error("新增失败");
                this.$message.success("新增成功");
                this.dialogFormVisible = false;
                this.getassignmentList();
            });
        },

    },
    mounted() {
        this.getassignmentList()
    },
    components: {
        Pagination
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
    text-align: center;
}

main {

    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.el-header {
    padding: 0;
    float: left;
    width: 100%;
    ;

    .el-input {
        width: 185px;
        margin-right: 15px;
    }

    .delet {
        color: #fff;
        background-color: #fab6b6;
        border-color: #fab6b6;
    }

    .active {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
    }

    .add {
        color: #fff;
        background-color: #17b3a3;
        border-color: #17b3a3;
    }
}
</style>